<template>
	<view>

		<view class='top-box'>
			<!-- ====== begin 顶部区域 - 搜索&&过滤 ====== -->
			<!-- 参考自pages/columnGoods/goods_list/index.vue -->
			<view class='search bg-color acea-row row-between-wrapper'>
				<view style="text-align: center;" class='iconfont'
					:class='deviceListMode==true?"icon-pailie":"icon-tupianpailie"' @click='switchdeviceListMode'>
				</view>
				<view class='input acea-row row-between-wrapper'><text class='iconfont icon-sousuo'></text>
					<input placeholder='搜索设备' placeholder-class='placeholder' confirm-type='search' name="search"
						:value='searchKeyword' @confirm="searchSubmit"></input>
				</view>
				<view @click='onTapFilter' class="filter" :class="{'on':!noFilter}">
					筛选
					<text class="iconfont icon-shaixuan"></text>
				</view>
			</view>
			<!-- ====== end 顶部区域 - 搜索&&过滤 ====== -->


			<!-- ====== begin 顶部区域 - 排序 ====== -->
			<!-- 参考自pages/columnGoods/goods_list/index.vue -->
			<view class="sort-wrapper">
				<view class='sort acea-row row-middle'>
					<view class='item' :class="{'on':orderOfDeviceSn>0}" @click='onTapOrderOfDeviceSn'>
						<text>设备序列号</text>
						<image v-if="orderOfDeviceSn==1" src='/static/images/up.png'></image>
						<image v-else-if="orderOfDeviceSn==2" src='/static/images/down.png'></image>
						<image v-else src='/static/images/horn.png'></image>
					</view>
					<view class='item' :class="{'on':orderOfOnlineTime>0}" @click='onTapOrderOfOnlineTime'>
						<text>上线时间</text>
						<image v-if="orderOfOnlineTime==1" src='/static/images/up.png'></image>
						<image v-else-if="orderOfOnlineTime==2" src='/static/images/down.png'></image>
						<image v-else src='/static/images/horn.png'></image>
					</view>
					<view class='item' :class="{'on':orderOfOfflineTime>0}" @click='onTapOrderOfOfflineTime'>
						<text>掉线时间</text>
						<image v-if="orderOfOfflineTime==1" src='/static/images/up.png'></image>
						<image v-else-if="orderOfOfflineTime==2" src='/static/images/down.png'></image>
						<image v-else src='/static/images/horn.png'></image>
					</view>
					<!-- <view class='item' :class="{'on':orderOfUseTime>0}" @click='onTapOrderOfUseTime'>
						<text>最近使用时间</text>
						<image v-if="orderOfUseTime==1" src='/static/images/up.png'></image>
						<image v-else-if="orderOfUseTime==2" src='/static/images/down.png'></image>
						<image v-else src='/static/images/horn.png'></image>
					</view>
					<view class='item' :class="{'on':orderOfRetFshTime>0}" @click='onTapOrderOfRetFshTime'>
						<text>最近回鱼时间</text>
						<image v-if="orderOfRetFshTime==1" src='/static/images/up.png'></image>
						<image v-else-if="orderOfRetFshTime==2" src='/static/images/down.png'></image>
						<image v-else src='/static/images/horn.png'></image>
					</view> -->
				</view>
			</view>
			<!-- ====== end 顶部区域 - 排序 ====== -->
		</view>


		<!-- ====== begin 设备区域 ====== -->
		<scroll-view class="device-box" scroll-y scroll-with-animation>
			<view style="height:20rpx"></view>

			<view class="device" v-for="(device,index) in devices" :key="index" :data-idx="index">
				<checkbox-group class="sn-info" @change="checkboxChange(index)">
					<label>
						<text>{{index+1}}. {{device.deviceSn}}</text>
						<checkbox :checked="device.checked" />
					</label>
				</checkbox-group>
				<view class="state-info" v-if="deviceListMode">
					<view class="cu-capsule radius">
						<view class="cu-tag bg-grey">连接状态</view>
						<view class="cu-tag line-grey">{{device.connState}}</view>
					</view>
					<view class="cu-capsule radius">
						<view class="cu-tag bg-grey">上线时间</view>
						<view class="cu-tag line-grey">
							{{device.onlineTime?device.onlineTime:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>					
					<view class="cu-capsule radius">
						<view class="cu-tag bg-grey">工作状态</view>
						<view class="cu-tag line-grey">{{device.workState}}</view>
					</view>
					<view class="cu-capsule radius">
						<view class="cu-tag bg-grey">掉线时间</view>
						<view class="cu-tag line-grey">
							{{device.offlineTime?device.offlineTime:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>
					<!-- <view class="cu-capsule radius">
						<view class="cu-tag bg-grey">最近使用时间</view>
						<view class="cu-tag line-grey">
							{{device.recentUseTime?device.recentUseTime:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>
					<view class="cu-capsule radius">
						<view class="cu-tag bg-grey">最近回鱼时间</view>
						<view class="cu-tag line-grey">
							{{device.recentRetFshTime?device.recentRetFshTime:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view> -->
					<br>
					<!--
					关于查询设备状态（后面提了再做）
					  后面添加一个表t_fsh_dev_status(device_sn, prop, value, update_time)
					  每次查询设备状态得到响应后，把值写入t_fsh_dev_status，参考代码：public void handleQueryStateResponseFromDevice(Device device, String[] args)
					  每次小程序查询设备状态时就从t_fsh_dev_status中查询，参考代码：public R mpQueryDevices(String jsonParam, Long userId)
					<view class="cu-capsule radius" @click="onTapCalibration(index)">
						<view class="cu-tag big bg-orange">标定</view>
						<view class="cu-tag big line-orange">
							{{device.calibrated?device.calibrated:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>
					<view class="cu-capsule radius" @click="onTapVolume(index)">
						<view class="cu-tag big bg-orange">音量</view>
						<view class="cu-tag big line-orange">{{device.volume?device.volume:'&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>
					-->
					<view class="cu-capsule radius" @click="showBindView(index)">
						<view class="cu-tag big bg-orange">绑定</view>
						<view class="cu-tag big line-orange" style="font-size: xx-small;">
							{{device.bindInfo?device.bindInfo:'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}
						</view>
					</view>
				</view>
			</view>

			<view style="height:80rpx"></view>
		</scroll-view>
		<!-- ====== begin 设备区域 ====== -->


		<!-- ====== begin 侧面过滤窗口 ====== -->
		<view class="cu-modal drawer-modal justify-end" :class="showFilterModal?'show':''" @tap="hideFilterModal">
			<view class="cu-dialog" style="flex-basis: 60%; left: 40%;" @tap.stop="">
				<view class="dlg-client-title">
					<text>筛选</text>
				</view>
				<view class="filter-rule">
					<view class="title">使用状态：</view>
					<view class="my-sel-btn-grp">
						<view class="my-sel-btn" :class="{on:filter.deviceUsingState!==0&&filter.deviceUsingState!==1}"
							@click="changeFilter(1, 3)">不限</view>
						<view class="my-sel-btn" :class="{on:filter.deviceUsingState===1}" @click="changeFilter(1, 1)">
							使用中</view>
						<view class="my-sel-btn" :class="{on:filter.deviceUsingState===0}" @click="changeFilter(1, 0)">
							未使用</view>
					</view>
				</view>
				<view class="filter-rule">
					<view class="title">连接状态：</view>
					<view class="my-sel-btn-grp">
						<view class="my-sel-btn"
							:class="{on:filter.deviceOnlineState!==0&&filter.deviceOnlineState!==1}"
							@click="changeFilter(2, 3)">不限</view>
						<view class="my-sel-btn" :class="{on:filter.deviceOnlineState===1}" @click="changeFilter(2, 1)">
							在线</view>
						<view class="my-sel-btn" :class="{on:filter.deviceOnlineState===0}" @click="changeFilter(2, 0)">
							离线</view>
					</view>
				</view>
				<!-- 暂时不支持
				<view class="filter-rule">
					<view class="title">绑定状态：</view>
					<view class="my-sel-btn-grp">
						<view class="my-sel-btn" :class="{on:filter.deviceBindState!==0&&filter.deviceBindState!==1}"
							@click="changeFilter(3, '')">不限</view>
						<view class="my-sel-btn" :class="{on:filter.deviceBindState===1}" @click="changeFilter(3, 1)">
							已绑定</view>
						<view class="my-sel-btn" :class="{on:filter.deviceBindState===0}" @click="changeFilter(3, 0)">
							未绑定</view>
					</view>
				</view>
				-->
			</view>
		</view>
		<!-- ====== end 侧面过滤窗口 ====== -->


		<!-- ====== begin 绑定钓位侧面选择窗口 ====== -->
		<view class="cu-modal drawer-modal justify-end" :class="showBindingModal?'show':''" @tap="hideBindingModal">
			<view class="cu-dialog" style="flex-basis: 80%; left: 20%; background-color: #f1f1f1;" @tap.stop="">
				<view class="dlg-client-title">
					<text>设备：{{binding.deviceSn}}</text>
				</view>
				<scroll-view class="dlg-client-binding-box" scroll-y scroll-with-animation>
					<view class="dlg-client-merchants" v-for="(merchant, meridx) in binding.merchants" :key="meridx"
						:data-idx="meridx">
						<view class="merchant-name lay-sb-c-c pd-h-sm">{{merchant.merName}}<button class="mg-l-md btn sm line-grey" @click="onExpand(merchant)">{{merchant.expand?'合并':'展开'}}</button></view>
						<block v-if="merchant.expand">
							<view v-if="merchant.ponds.length < 1" class="dlg-client-noponds">没有钓塘</view>
							<view v-else class="dlg-client-ponds" v-for="(pond, pondidx) in merchant.ponds" :key="pondidx"
								:data-idx="pondidx">
								<view v-if="pond.partitionMode==1">
									<view class="dlg-client-partitions" v-for="(partition, partitionidx) in pond.partitions"
										:key="partitionidx" :data-idx="partitionidx">
										<view class="pond-name lay-sb-c-c pd-h-sm">{{pond.pondName + ' > ' + partition.partitionName}}<button class="mg-l-md btn sm line-grey" @click="onExpand(partition)">{{partition.expand?'合并':'展开'}}</button></view>
										<block v-if="partition.expand">
											<view class="dlg-client-seats">
												<view class="seat" v-for="(seat, seatidx) in partition.seats"
													:key="seatidx" :data-idx="seatidx" 
													@click="onSelectSeatForBind(merchant.merName+' > '+pond.pondName+' > '+partition.partitionName+' > '+seat.seatNo+'号', seat)">
													<view>{{seat.seatNo}}</view>
													<view>{{seat.deviceSn?seat.deviceSn:''}}</view>
													<image class="img" v-if="seat.seatId==binding.selectedSeat.seatId" src="@/static/images/active.png"></image>
													<view class="img" v-else>&nbsp;</view>
												</view>
											</view>
										</block>
									</view>
								</view>
								<view v-else>
									<view class="pond-name lay-sb-c-c pd-h-sm">{{pond.pondName}}<button class="mg-l-md btn sm line-grey" @click="onExpand(pond)">{{pond.expand?'合并':'展开'}}</button></view>
									<block v-if="pond.expand">
										<view class="dlg-client-seats">
											<view class="seat" v-for="(seat, seatidx) in pond.partitions[0].seats"
												:key="seatidx" :data-idx="seatidx"
												@click="onSelectSeatForBind(merchant.merName+' > '+pond.pondName+' > '+seat.seatNo+'号', seat)">
												<view>{{seat.seatNo}}</view>
												<view>{{seat.deviceSn?seat.deviceSn:''}}</view>
												<image class="img" v-if="seat.seatId==binding.selectedSeat.seatId" src="@/static/images/active.png"></image>
												<view class="img" v-else>&nbsp;</view>
											</view>
										</view>
									</block>
								</view>
							</view>
						</block>

					</view>
				</scroll-view>

				<button class='my-btn' @click="doBind(binding.deviceSn)" style="margin-top:40rpx;">绑定</button>
			</view>
		</view>
		<!-- ====== end 绑定钓位侧面选择窗口 ====== -->


		<!-- ====== begin 悬浮按钮 ====== -->
		<view class="fix-btn" @click="onTapFixBtn">
			<image src="https://mer.chuidiaotop.com/static/images/close.gif"></image>
		</view>
		<view class="cu-modal bottom-modal" :class="showActionModal?'show':''" @tap="hideActionModal">
			<view class="cu-dialog">
				<view class="actions">
					<view class="my-sel-btn" v-for="(action,index) in actions" :key="index" :data-idx="index"
						@click="onTapAction(action)">{{action.title}}</view>
				</view>
				<view class="my-sel-btn cancel" @click="hideActionModal">取消</view>
			</view>
		</view>
		<!-- ====== end 悬浮按钮 ====== -->
	</view>
</template>

<script>
	import {
		MyTip
	} from '../../components/ssty/common.js';
	import {
		queryDevices,
		queryMerSeatsForBind,
		bindDeviceSeat,
		setupDevice
	} from '@/api/fsh.js';

	export default {
		data() {
			let devices = [];

			// debug code
			// for(let i = 0; i < 20; i++) {
			// 	devices.push({
			// 		sn: 'DY*850314002000067', 
			// 		calibrated: '是',
			// 		volume: '3级',
			// 		bindInfo: '龙华好钓 > A塘 > 1区 > 11号',
			// 		connState: '在线',
			// 		workState: '空闲',
			// 		onlineTime: '2022-02-02 12:54:01',
			// 		offlineTime: '2022-02-02 12:54:01',
			// 		recentUseTime: '2022-02-02 12:54:01',
			// 		recentRetFshTime: '无',

			// 		checked: false
			// 	})
			// }

			return {
				// ====== begin 顶部区域 - 搜索&&过滤 ====== 
				searchKeyword: '',
				deviceListMode: true, // true-详情列表 false-缩略方格
				showFilterModal: false, // 侧面过滤窗口

				// 过滤项:
				filter: {
					deviceUsingState: 2, // 设备使用状态：0-没使用, 1-使用中, 其它-不限
					deviceOnlineState: 2, // 设备在线状态：0-离线, 1-在线, 其它-不限
					deviceBindState: 2, // 绑定状态：0-未绑定, 1-已绑定, 其它-不限
				},
				// ====== end 顶部区域 - 搜索&&过滤 ====== 


				// ====== begin 顶部区域 - 排序 ======
				orderOfDeviceSn: 0,			// 根据设备序列号排序：0-不启用, 1-升序, 2-降序
				orderOfOnlineTime: 0,		// 根据设备上线时间排序：0-不启用, 1-升序, 2-降序
				orderOfOfflineTime: 0,		// 根据设备掉线时间排序：0-不启用, 1-升序, 2-降序
				orderOfUseTime: 0,
				orderOfRetFshTime: 0,
				// ====== end 顶部区域 - 排序 ======


				// ====== begin 设备区域 ======
				devices: devices,
				pageNum: 1,
				// ====== end 设备区域 ======


				// ====== begin 绑定钓位侧面选择窗口 ======
				showBindingModal: false,
				binding: {
					deviceSn: "",
					merchants: [{
						expand: false,
						ponds: [{
							expand: false,
							partitions: [ {
								expand: false,
							}]
						}]
					}],
					selectedSeat: null,
				},
				// ====== end 绑定钓位侧面选择窗口 ======


				// ====== begin 悬浮按钮 ======
				showActionModal: false,
				actions: [
					//{title:'查询状态', name:'detectDevice'}, 
					{title:'取消绑定', name:'unbindDeviceSeat'}, 
					{title:'称重标定', name:'weightCalibration'}, 
					{title:'重启设备', name:'resetDevice'}, 
					//{title:'关闭设备', name:''}, 
					{title:'电机复位', name:'resetMotor'}, 
					{title:'电机转动', name:'rotateMotor'}, 
					//{title:'安装调试', name:'openDebug'}, 
					//{title:'调节音量', name:'setDeviceVolume'}, 
					//{title:'调试激活', name:'debugActivate'}, 
					//{title:'调试启动', name:'debugStart'}, 
					//{title:'调试停止', name:'debugStop'}, 
					//{title:'定位间隔', name:'setUDInterval'},
					{title:'配置IP', name:'setServerAddr'}, 
					{title:'运行日志', name:'deviceLog'}, 
					{title:'回鱼记录', name:'retFshLog'}
				],
				// ====== end 悬浮按钮 ======
			};
		},
		computed: {
			noFilter() {
				return true;
			}
		},
		onLoad() {
			this.binding.merchants = [];
			this.freshDevices();
		},
		methods: {
			// ====== begin 顶部区域 - 搜索&&过滤 ====== 
			// 参考自pages/columnGoods/goods_list/index.vue 
			onTapBack() {
				uni.navigateBack()
			},
			searchSubmit(e) {
				this.searchKeyword = e.detail.value;
				this.freshDevices();
			},
			switchdeviceListMode() {
				this.deviceListMode = !this.deviceListMode
			},
			onTapFilter() {
				this.showFilterModal = !this.showFilterModal; // 侧面过滤窗口
			},
			hideFilterModal() { // 侧面过滤窗口
				this.showFilterModal = false;
			},
			changeFilter(i, v) {
				if (i == 1)
					this.filter.deviceUsingState = v;
				else if (i == 2)
					this.filter.deviceOnlineState = v;
				else
					this.filter.deviceBindState = v;
				
				this.freshDevices();
			},
			// ====== end 顶部区域 - 搜索&&过滤 ====== 


			// ====== begin 顶部区域 - 排序 ======
			onTapOrderOfDeviceSn() {
				this.orderOfDeviceSn += 1;
				if (this.orderOfDeviceSn == 3)
					this.orderOfDeviceSn = 0;
				this.freshDevices();
			},
			onTapOrderOfOnlineTime() {
				this.orderOfOnlineTime += 1;
				if (this.orderOfOnlineTime == 3)
					this.orderOfOnlineTime = 0;
				this.freshDevices();
			},
			onTapOrderOfOfflineTime() {
				this.orderOfOfflineTime += 1;
				if (this.orderOfOfflineTime == 3)
					this.orderOfOfflineTime = 0;
				this.freshDevices();
			},
			onTapOrderOfUseTime() {
				this.orderOfUseTime += 1;
				if (this.orderOfUseTime == 3)
					this.orderOfUseTime = 0;
				this.freshDevices();
			},
			onTapOrderOfRetFshTime() {
				this.orderOfRetFshTime += 1;
				if (this.orderOfRetFshTime == 3)
					this.orderOfRetFshTime = 0;
				this.freshDevices();
			},
			// ====== end 顶部区域 - 排序 ======


			// ====== begin 设备区域 ======
			checkboxChange(idx) {
				this.devices[idx].checked = !this.devices[idx].checked;
			},

			onTapCalibration(idx) {
				//console.log("deviceManage::onTapCalibration", idx, this.devices);
			},

			onTapVolume(idx) {
				//console.log("deviceManage::onTapVolume", idx, this.devices);
			},

			showBindView(idx) {
				//console.log("deviceManage::onTapBind", idx, this.devices);

				// ====== begin 绑定钓位侧面选择窗口 ======
				if (this.binding.merchants.length < 1) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					queryMerSeatsForBind(1).then(res => {
						uni.hideLoading();

						console.log("deviceManager::onTapBind, querySeatsForBind ok:", res);
						this.binding.merchants = res.entity;
						this.binding.deviceSn = this.devices[idx].deviceSn;
						this.showBindingModal = true;
						
						this.binding.merchants.forEach(mer=>{
							mer.expand = false;
							mer.ponds.forEach(pond=>{
								pond.expand = false;
								pond.partitions.forEach(partition=>{
									partition.expand = false;
								})
							})
						})
						
					}).catch(err => {
						console.log("deviceManager::onTapBind, querySeatsForBind fail:", err);
						uni.hideLoading();
					});
				} else {
					this.binding.deviceSn = this.devices[idx].deviceSn;
					this.showBindingModal = true;
				}
				// ====== end 绑定钓位侧面选择窗口 ======
			},

			freshDevices() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				
				console.log("deviceManager::freshDevices| queryDevices ...");
				queryDevices(this.searchKeyword, this.filter.deviceUsingState, this.filter.deviceOnlineState, this.filter.deviceBindState, 
					this.pageNum, this.orderOfDeviceSn, this.orderOfOnlineTime, this.orderOfOfflineTime).then(res => {
					uni.hideLoading();
					console.log("deviceManager::freshDevices| queryDevices ok, devices=%o", res.entity);
					res.entity.forEach(a => {
						a.checked = false;
						a.calibrated = '';
						a.volume = '';
						a.connState = (1 == a.isOnline) ? '在线' : '离线';
					})
					this.devices = res.entity;
				}).catch(err => {
					console.log("deviceManager::freshDevices fail:", err);
					uni.hideLoading();
				});
			},
			// ====== end 设备区域 ======


			// ====== begin 绑定钓位侧面选择窗口 ======
			hideBindingModal() {
				this.showBindingModal = false
			},
			onSelectSeatForBind(name, seat) {
				this.binding.selectedSeat = seat;
				this.binding.selectedSeat.name = name;
			},
			doBind(deviceSn) {
				if(!this.binding.selectedSeat.seatId) {
					MyTip("请先选择要绑定的目标钓位");
					return;
				}
				
				let that = this;
				uni.showModal({
					title: '请确认',
					content: that.binding.selectedSeat.deviceSn
						? "当前钓位'" + that.binding.selectedSeat.name + "'已经绑定了设备，请确认是否要重新绑定？"
						: "是要绑定设备到钓位'" + that.binding.selectedSeat.name + "'吗？",
					success: function(res) {
						if (res.confirm) {
							bindDeviceSeat(deviceSn, that.binding.selectedSeat.seatId, 
								that.binding.selectedSeat.seatNo).then(res => {
								MyTip("绑定成功");
								that.hideBindingModal();
								that.freshDevices();
							}).catch(err => {
								console.log("绑定失败", err);
								MyTip("绑定失败："+err);
							});
						}
						
						that.binding.selectedSeat = {};
					}
				});
				
				// loadFshGrounds(pageNum, cbDone) {
				// 	uni.showLoading({
				// 		title: '努力加载中...'
				// 	});
				// 	queryFshGrounds(pageNum).then(res => {
				// 		console.log("fsh_ground_main::loadFshGrounds ok, res=%o", res)
				// 		uni.hideLoading();
				// 		if (cbDone)
				// 			cbDone(res.entity);
				// 	}).catch(err => {
				// 		console.log("fsh_ground_main::loadFshGrounds fail, err=%o", err)
				// 		uni.hideLoading();
				// 		if (cbDone)
				// 			cbDone(false);
				// 		MyTip(err.msg);
				// 	});
				// },
			},
			onExpand(node) {
				node.expand = !node.expand;
				this.binding.merchants = JSON.parse( JSON.stringify(this.binding.merchants) );
				console.log("expand change:", node);
			},
			// ====== end 绑定钓位侧面选择窗口 ======


			// ====== begin 悬浮按钮 ======
			onTapFixBtn() {
				this.showActionModal = true;
			},

			onTapAction(action) {
				console.log("deviceManage::onTapAction", action);
				let devices = this.devices.filter(a=>a.checked);
				switch(action.title)
				{
					case "称重标定":
					case "查询状态":
					case "取消绑定":
					case "重启设备":
					case "电机复位":
					case "电机转动":
					case "安装调试":
					{
						devices = devices.map(a=>({deviceSn: a.deviceSn}));
						break;
					}
					case "调节音量": {
						uni.showActionSheet({
							itemList: ['静音', '1级', '2级', '3级'],
							success: function (res) {
								//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								devices = devices.map(a=>({deviceSn: a.deviceSn, volume:res.tapIndex}));
								setupDevice(action.name, devices).then(res=>{
									console.log("setupDevice", action.name, devices, res);
									that.freshDevices();
								})
							},
							fail: function (res) {
								//console.log(res.errMsg);
							}
						});
						break;
					}
					case "配置IP": {
						let that = this;
						uni.showActionSheet({
							itemList: ['多商户服务器', '单商户服务器'],
							success: function (res) {
								// ['merdev.chuidiaotop.com:8003','yxdev.chuidiaotop.com:8001']
								//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
								devices = devices.map(a=>({
									deviceSn: a.deviceSn, 
									serverIP:res.tapIndex==0?'merdev.chuidiaotop.com':'yxdev.chuidiaotop.com',
									serverPORT:res.tapIndex==0?8003:8001
								}));
								setupDevice(action.name, devices).then(res=>{
									console.log("setupDevice", action.name, devices, res);
									that.freshDevices();
								})
							},
							fail: function (res) {
								//console.log(res.errMsg);
							}
						});
						
						return;
					}
					case "回鱼记录": {
						uni.navigateTo({
							url: "/pages/fsh/fshRetLogs?deviceSn="+devices[0].deviceSn
						})
						return;
					}
					default: {
						// 定位间隔,'调试激活', '调试启动','调试停止', '配置IP', '运行日志', '回鱼记录'
						MyTip("暂未支持："+action.title);
						return;
					}
				}
				setupDevice(action.name, devices).then(res=>{
					console.log("setupDevice", action.name, devices, res);
					this.freshDevices();
				})
			},

			hideActionModal() {
				this.showActionModal = false;
			},
			// ====== begin 悬浮按钮 ======
			
		}
	}
</script>

<style lang="scss">
	@import "@/leui.scss";
	
	/* ====== begin 顶部区域 - 搜索&&过滤 ====== */
	$top-box-search-height: 86rpx;

	.top-box .search {
		width: 100%;
		height: $top-box-search-height;
		padding: 0 20rpx;
		box-sizing: border-box;
		//position: fixed;
		left: 0;
		top: 0;
		//z-index: 9;
	}

	.top-box .search .back {
		display: flex;
		align-items: center;
		width: 40rpx;
		height: 60rpx;

		.iconfont {
			color: #fff;
			font-size: 36rpx;
		}
	}

	.top-box .search .input {
		width: 500rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.top-box .search .input input {
		flex: 1;
		height: 100%;
		font-size: 26rpx;
		margin-left: 10rpx;
	}

	.top-box .search .input .placeholder {
		color: #999;
	}

	.top-box .search .input .iconfont {
		font-size: 35rpx;
		color: #555;
	}

	.top-box .search .icon-pailie,
	.top-box .search .icon-tupianpailie {
		color: #fff;
		width: 62rpx;
		font-size: 40rpx;
		height: 86rpx;
		line-height: 86rpx;
	}

	.top-box .search .filter {
		color: #fff;
	}

	.top-box .search .filter.on {
		border: solid 1px #fff;
		padding: 4rpx 4rpx;
		border-radius: 8rpx;
	}

	/* ====== end 顶部区域 - 搜索&&过滤 ====== */


	/* ====== begin 顶部区域 - 排序 ====== */
	.top-box .sort-wrapper {
		//z-index: 9;
		//position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		//margin-top: 86rpx;
		background-color: $theme-color;

		.tab-bar {
			display: flex;
			align-items: center;

			.tab-item {
				position: relative;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8rpx 0 20rpx;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;

				&::after {
					content: ' ';
					position: absolute;
					left: 50%;
					bottom: 18rpx;
					width: 30rpx;
					height: 3rpx;
					background: transparent;
					transform: translateX(-50%);
				}

				&.on {
					&::after {
						background: #fff;
					}
				}
			}
		}
	}

	$top-box-sort-height: 86rpx;

	.top-box .sort {
		height: $top-box-sort-height;
		color: #8799a3;
		font-size: 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.top-box .sort .item {
		display: flex;
		align-items: center;
		justify-content: center;
		// width: 100rpx;
	}

	.top-box .sort .item.on {
		color: #454545;
		font-weight: bold;
	}

	.top-box .sort .item text {
		flex: 1;
	}

	.top-box .sort .item image {
		width: 15rpx;
		height: 19rpx;
		margin-left: 4rpx;
	}

	/* ====== end 顶部区域 - 排序 ====== */


	/* ====== begin 设备区域 ====== */
	.device-box {
		height:calc(100vh - #{$top-box-search-height} - #{$top-box-sort-height}); // 对scss变量做calc计算不能直接使用$topHeight，要加#{}
		// padding: 40rpx 20rpx 80rpx 20rpx; // 加入padding后导致内容区域把scroll-view的宽度撑开超过100%，暂时不知道什么原因，后面再研究？？？？？？
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		background-color: #F1F1F1;
	}

	.device {
		margin: 20rpx 20rpx;
		padding: 20rpx 20rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.sn-info {
			margin-bottom: 10rpx;

			label {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;

				checkbox {
					transform: scale(1.2); // checkbox放大1.2倍
				}
			}
		}

		.state-info {

			//display: flex;
			//flex-wrap: wrap;
			//justify-content: space-between;
			// align-content: space-between; // 要指定height时才起作用
			.cu-capsule {
				margin-bottom: 20rpx;
				margin-left: 20rpx;
			}
		}
	}

	/* ====== end 设备区域 ====== */


	/* ====== begin 侧面过滤窗口 ====== */
	.dlg-client-title {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx 0rpx;
		font-size: large;
		font-weight: bold;
	}

	.filter-rule {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.filter-rule .title {
		font-size: 30rpx;
		color: #999;
		text-align: left;
		margin-left: 8rpx;
	}

	/* ====== end 侧面过滤窗口 ====== */


	/* ====== begin 绑定钓位侧面选择窗口 ====== */
	.dlg-client-binding-box {
		height: calc(100vh - 310rpx);
		background-color: white;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

		.dlg-client-merchants {
			margin-bottom: 40rpx;

			.merchant-name {
				background-color: beige;
				line-height: 80rpx;
				font-weight: bold;
			}

			.dlg-client-ponds {
				margin-top: 40rpx;
				
				.pond-name {
					text-align: left;
					margin-left: 20rpx;
				}
				
				.dlg-client-seats {
					border: 1rpx solid rgba(0, 0, 0, 0.1);
					border-radius: 6rpx;
					margin: 0rpx 20rpx 40rpx 20rpx;
					
					.seat {
						display: flex;
						justify-content: space-around;
						line-height: 80rpx;
						align-items: center;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
						padding: 0rpx 20rpx;
						
						.img {
							width: 42rpx;
							height: 42rpx;
						}
						
						:nth-last-child(2) { // 取.seat下的倒数第2个子元素
							flex: 1;
						}
					}
					
					:nth-last-child(1) { // 取.dlg-client-seats下的最后一个子元素
						border-bottom: none !important;
					}
				}
			}
			
			.dlg-client-noponds {
				margin-top: 40rpx;
				line-height: 80rpx;
				color: #ccc;
			}
		}
	}

	/* ====== end 绑定钓位侧面选择窗口 ====== */


	/* ====== begin 悬浮按钮 ====== */
	.fix-btn {
		position: fixed;
		top: px;
		right: 20px;
		bottom: 10px;
		z-index: 1;
		//background: transparent;
		//background-color: rgba(0, 0, 0, 0.25);

		image {
			width: 40px;
			height: 40px;
		}
	}

	.cu-dialog {
		.actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx 40rpx;

			.my-sel-btn {
				margin-top: 30rpx;
			}
		}

		.cancel {
			margin: 20rpx 40rpx 40rpx 40rpx;
			padding: 12rpx;
		}
	}

	/* ====== end 悬浮按钮 ====== */
</style>
